<script setup>
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from 'vue-router';
import { reportList } from "@/data/reportList"
import { reportShop } from '@/server/api/shopApi';
import { useUseStore } from "@/stores/user";
import { ToastFun } from '@/hook/toast';
import { ref } from 'vue';
const { t } = useI18n();

const user = useUseStore();
const route = useRoute();
const router = useRouter();
const shopId = route.query.id;
console.log(shopId, "店铺id");
console.log(user.userId);


const report = async (detail, id) => {
    console.log(detail);
    console.log(id);
    const data = ref({
        associatedStoresId: id,
        tipOff: detail,
        type: 1,//举报实体店是1
        userId: user.userId
    });
    const res = await reportShop(data.value)
    console.log(res);
    if (res.status === 200) {
        ToastFun(t("pay.success2"));
        router.go(-1);
    } else {
        ToastFun("");
    }
};
const goPrivious = () => {
    router.go(-1);
}

</script>

<template>
    <div class="report">
        <di class="imgDiv">
            <img src="/images/Shop/shopDetailBackBtn.png" class="backBtn" @click="goPrivious" /><br />
        </di>
        <h5>{{ $t('item.details.report') }}</h5>
        <ul>
            <li v-for="list in reportList">
                <div class="com">
                    <div class="title">{{ $t(list.title) }}</div>
                    <div class="det">{{ $t(list.detail) }}</div>
                </div>
                <div class="btn" @click="report(list.title, shopId)">
                    {{ $t('item.details.report') }}
                </div>
            </li>

        </ul>
    </div>
</template>

<style scoped lang="scss">
.report {
    border-radius: 10rem;
    padding-top: 10rem;

    .imgDiv {
        margin-bottom: 10rem;
        margin-left: 10rem;

        .backBtn {
            // position: fixed;
            // z-index: 1000;
            top: 10rem;
            left: 16rem;

        }
    }

    h5 {
        font-size: 20rem;
        font-weight: 500;
        line-height: 40rem;
        padding-left: 10px;
    }

    ul {
        li {
            display: flex;
            padding: 4rem 10rem;
            border-bottom: 2px solid #f7f7f7;
            justify-content: space-between;
            align-items: center;

            .com {
                // border-radius: 10rem;
                // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                width: 80%;

                .title {
                    font-size: 16rem;
                    font-weight: bold;
                    padding: 2px;
                }

                .det {
                    font-size: 14rem;
                    padding: 2px;
                }
            }

            .btn {
                background-color: #642e8e;
                color: #fff;
                font-size: 12rem;
                line-height: 20rem;
                border-radius: 4rem;
                width: 20%;

                justify-content: center;
                display: flex;
            }

        }
    }
}
</style>
